<template>
	<u-modal :show="show" :negativeTop="200" :title="title" confirmText="确定" showCancelButton confirmColor="#FD8906"
		cancelColor="#000" @confirm="save" @cancel="show = false" @close="show = false" zoom width="700rpx">
		<view class="f-1 w100 f12 ggwrap" v-if="flag">
			<view class="f-bt f-y-c bf p2">
				<view class="f-g-1">
					<u-input placeholder="请输入商品名称" v-model="queryForm.name" @change="fetchData" prefixIcon="search"
						shape="circle"
						prefixIconStyle="font-size: 22px;color: #666;margin-right:10rpx;padding-left:10px"
						placeholderStyle="color:#666" customStyle="background:#f8f8f8;padding:15rpx 5rpx;" border="none"
						clearable>
					</u-input>
				</view>
			</view>
			<view class="bf">
				<u-tabs :list="options" :current="current" :scrollable="true" lineWidth="40px" :lineColor="subColor"
					@change="tabChange"></u-tabs>
			</view>
			<view class="uni-container mt10">
				<uni-table ref="table" border stripe type="selection" emptyText="暂无数据"
					@selection-change="handleSelectionChange">
					<uni-tr>
						<uni-th align="center">商品ID</uni-th>
						<uni-th align="center">商品名称</uni-th>
						<uni-th align="center">价格</uni-th>
						<uni-th align="center">商品规格</uni-th>
						<uni-th align="center">初始库存</uni-th>
					</uni-tr>
					<uni-tr v-for="(row, i) in tableData" :key="i">
						<uni-td align="center">{{row.spuId}}</uni-td>
						<uni-td align="center">
							<view class="pt10 pb10 name flex" v-if="row.spu">
								<image class="avatar m-r-small bs5" :src="row.spu.logo" />
								<view class="rBox">
									<view class="f14 ml5">{{ row.spu.name }}</view>
								</view>
							</view>
						</uni-td>
						<uni-td align="center">{{row.price}}</uni-td>
						<uni-td align="center">
							<view>
								<view v-if="row.specName&&row.specName.length>0">{{ row.specName[0].name }}</view>
								<view v-else>-</view>
							</view>
						</uni-td>
						<uni-td align="center">{{row.inventory}}</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box"><uni-pagination show-icon :page-size="queryForm.pageSize"
						:current="queryForm.pageNo" :total="total" @change="change" /></view>
			</view>
		</view>
	</u-modal>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import site from '@/custom/siteroot.js';
	import config from '@/custom/config.js';
	export default {
		components: {

		},
		props: {
			mode: {
				type: String,
				default: () => 'single'
			},
			v: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				queryForm: {
					type: 1,
					name: "",
					pageNo: 1,
					pageSize: 10,
					catId: '',
				},
				show: false,
				list: [],
				total: 0,
				checkData: [],
				tableData: [],
				loading: true,
				total: 0,
				options: [],
				selectData: [],
				current: 0,
				flag: false,
				title:'',
			}
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			async open() {
				this.selectData = []
				this.flag = true
				await this.fetchData();
				this.getCateList()
				this.show = true
			},
			tabChange(form) {
				if (form.id == this.queryForm.catId) {
					return;
				}
				this.queryForm.catId = form.id || '';
				this.fetchData();
			},
			async fetchData(type) {
				this.status = 'loading'
				let {
					data: {
						list,
						pageNo,
						pageSize,
						total
					},
				} = await this.beg.request({
					url: `${this.api.getGoodsSku}`,
					data: this.queryForm,
				})
				this.tableData = list
			},
			async getCateList() {
				let {
					data: {
						list,
						pageNo,
						pageSize,
						total
					},
				} = await this.beg.request({
					url: `${this.api.goodsCatList}`,
					data: {
						pageNo: 1,
						pageSize: 999,
						onlyStore: 1,
					},
				})
				if (list) this.options = [{
					name: "全部",
					goods_count: this.total,
					catId: '',
				}, ...list]
			},
			change(e) {
				this.queryForm.pageNo = e.current;
				this.fetchData()
			},
			handleSelectionChange(e) {
				this.selectData = e.detail.index
			},
			selectedItems() {
				return this.selectData.map(i => this.tableData[i])
			},
			close() {
				this.queryForm.name = ''
				this.selectData = []
				this.tableData = []
				this.flag = false
				this.show = false
			},
			async save() {
				console.log('state', this.selectData)
				this.$emit('saveGoods', this.selectData.map(i => this.tableData[i]))
				this.close()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.ggwrap {
		height: 900rpx;
		overflow: hidden;
		overflow-y: scroll;
	}

	.left {
		width: 110rpx;
		text-align: right;
	}

	.ggz {
		background: #f7f8fa;

		.srggz {
			width: 120rpx;
		}
	}

	.avatar {
		width: 50px;
		height: 50px;
	}
</style>